<template>
  <view class="s-col" :class="c_class" :style="c_style">
    <slot />
  </view>
</template>

<script>
import componentMixin from '../../mixins/componentMixin';

/**
 * s-col s-row子级
 * @description 栅格组件子元素
 * @property {Number|String} span 列元素宽度
 * @property {Number|String} offset 列元素偏移距离
 * @example <s-span :span="8"></s-span>
 */
export default {
  name: 'SCol',
  mixins: [componentMixin],
  props: {
    span: [Number, String],
    offset: [Number, String],
    overflow: String,
  },
  computed: {
    c_class() {
      return this.$mergeClass({
        [`s-col--${this.span}`]: parseInt(this.span) > 0,
        [`s-col--offset-${this.offset}`]: parseInt(this.offset) > 0,
      }, this.custom_class);
    },
    c_style() {
      const { spaceX, spaceY } = this.$sRow;
      const style = {
        overflow: this.overflow,
      };
      if (spaceX) {
        style.paddingLeft = spaceX;
        style.paddingRight = spaceX;
      }
      if (spaceY) {
        style.paddingTop = spaceY;
        style.paddingBottom = spaceY;
      }
      return this.$mergeStyle(style, this.custom_style);
    },
  },
  created() {
    this.$sRow = this.$getParentUntil('SRow');
  },
};
</script>

<style lang="scss" src="./index.scss"></style>
